{% extends 'work-layout.html' %}
{% block table-index %}nav-link{% endblock %}
{% block table-show %}show{% endblock %}
{% block table-index-ShowData %}active{% endblock %}
{% block body %}

<main id="main" class="main">
  <div class="pagetitle">
    <h1>PHQ-9 测评数据</h1>
    <nav>
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="index.html">Home</a></li>
        <li class="breadcrumb-item">心理评估</li>
        <li class="breadcrumb-item active">PHQ-9 记录</li>
      </ol>
    </nav>
  </div>

  <section class="section">
    <div class="row">
      <div class="col-lg-12">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">测评记录总览</h5>

            <!-- 数据表格 -->
            <table class="table datatable">
              <thead>
                <tr>
                  <th>用户</th>
                  <th>年龄</th>
                  <th>性别</th>
                  <th>地区</th>
                  <th>完成时间</th>
                  <th>总分</th>
                  <th>抑郁程度</th>
                  <th>报告下载</th>  <!-- 列名称修改 -->
                </tr>
              </thead>
              <tbody>
                {% for record in records %}
                <tr>
                  <td>{{ record.user }}</td>
                  <td>{{ record.age }}</td>
                  <td>{{ record.gender }}</td>
                  <td>{{ record.province }}-{{ record.city }}</td>
                  <td>{{ record.created_at|date:"Y/m/d" }}</td>
                  <td>{{ record.total_score }}</td>
                  <td>
                    <span class="badge {{ record.severity_class }}">
                      {{ record.severity_text }}
                    </span>
                  </td>
                  <td>
                    <!-- 修改为下载链接 -->
                    <a href="{% url 'download-film' file_name=record.download_url %}"
                       class="btn btn-sm btn-outline-primary"
                       title="下载详细报告">
                      <i class="bi bi-file-earmark-arrow-down"></i>
                    </a>
                  </td>
                </tr>
                {% endfor %}
              </tbody>
            </table>

          </div>
        </div>
      </div>
    </div>
  </section>
</main>

<style>
  .severity-0 { background-color: #28a745; }
  .severity-1 { background-color: #4da3ff; }
  .severity-2 { background-color: #ffc107; }
  .severity-3 { background-color: #fd7e14; }
  .severity-4 { background-color: #dc3545; }
</style>

{% endblock %}